<script setup >
import {ref, watch} from 'vue'
import {useRoute} from "vue-router";
import {getProductSearch} from "@/apis/home.js";
import router from "@/router/index.js";

const route = useRoute();

const search = ref(route.query.search);
const loading = ref(false)
const error = ref(null)

watch(() => route.query.search, (newVal) => {
  search.value = newVal;
  getSearch();
})

const result = ref([]);

// 获取搜索结果
const getSearch = async () => {
  if (! search.value) return

  loading.value = true
  error.value = null

  try {
    const resp = await getProductSearch({ search: search.value })
    result.value = resp.data || []
  } catch (err) {
    error.value = '搜索失败，请稍后再试。'
    console.error(err)
  } finally {
    loading.value = false
  }
}


const clickDetail = (id) => {

  if (id) {
    router.push({
      path: `/detail/${id}`,
    })
  }
}

getSearch();

</script>

<template>
  <div class="search-container">
    <!-- 搜索关键词 -->
    <h2>搜索 "{{ search }}"</h2>

    <!-- 加载中 -->
    <div v-if="loading" class="loading">正在加载搜索结果...</div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error">{{ error }}</div>

    <!-- 无结果 -->
    <div v-else-if="result.length === 0" class="no-result">
      抱歉，没有找到与“{{ search }}”相关的结果。
    </div>

    <!-- 搜索结果列表 -->
    <div v-else class="product-list">
      <div @click="clickDetail(product.productId)" v-for="product in result" :key="product.productId" class="product-card">
        <h3>{{ product.title }}</h3>
        <p>{{ product.description }}</p>
        <img :src="product.imageUrl" alt="商品图片" />
        <p class="price">￥{{ product.price }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-container {
  max-width: 90%;
  margin: 10px auto;
  padding: 20px;
  font-family: Arial, sans-serif;

  h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }

  .loading,
  .error,
  .no-result {
    text-align: center;
    font-size: 18px;
    padding: 40px 0;
    color: #999;
  }

  .product-list {
    display: grid;
    // 修改这里，使每行正好容纳5个商品卡片
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 20px;
  }

  .product-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;

    &:hover {
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    h3 {
      font-size: 20px;
      margin-bottom: 10px;
      text-align: center;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 12rem;
    }

    img {
      // 设置固定的宽度和高度
      width: 150px;
      height: 150px;
      object-fit: cover; // 确保图片不失真
    }

    p {
      font-size: 14px;
      color: #666;
    }

    .price {
      margin-top: 10px;
      font-weight: bold;
      color: #d91a1a;
    }
  }
}
</style>
